Ext.namespace('GH.ui', 'GH.ui.panels');

GH.ui.panels.TestGridPanel = Ext.extend(Ext.grid.GridPanel, {
	url: '/api/get_all_test_info',
	title:'All My Test History && Info',
	trackMouseOver:false,
    disableSelection:true,
    loadMask: true,
    pageSize: 20,
    
    initComponent: function() {
    	
    	// hard coded - cannot be changed from outsid
        var config = {
        	store: this.initialConfig.store,	
        		
		    // grid columns
		    columns:[{
		        id: 'test_date',
		        header: "Date",
		        dataIndex: 'date',
		        width: '10%',
		        renderer: this.renderDate,
		        sortable: true
		    },{
		        id: 'test_content', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
		        header: "Test",
		        dataIndex: 'content',
		        width: '60%',
		        renderer: this.renderContent,
		        sortable: true
		    }, {
		        header: "Ordered by",
		        dataIndex: 'order_by_doctor',
		        width: '20%',
		        renderer: this.renderName,
		        sortable: true
		    }],
		
		    // customize view config
		    viewConfig: {
		        forceFit:true,
		        enableRowBody:true,
		        showPreview:true,
		        getRowClass : function(record, rowIndex, p, store){
		            if(this.showPreview){
		                //p.body = '<p>'+record.data.excerpt+'</p>';
		                return 'x-grid3-row-expanded';
		            }
		            return 'x-grid3-row-collapsed';
		        }
		    },
		
		    // paging bar on the bottom
		    bbar: new Ext.PagingToolbar({
		        pageSize: this.pageSize,
		        store: this.initialConfig.store,
		        displayInfo: true,
		        displayMsg: 'Displaying all tests {0} - {1} of {2}',
		        emptyMsg: "No tests to display",
		        items:[
		            '-', {
		            pressed: true,
		            enableToggle:true,
		            text: 'Show Detailed Info',
		            cls: 'x-btn-text-icon details',
		            toggleHandler: 
		            	function(btn, pressed){
		                //var view = grid.getView();
		                //view.showPreview = pressed;
		                //view.refresh();
		            	}
		            
		        }],
		    })
		    
		    
        }; // eo config object
    
		// apply config
		Ext.apply(this, Ext.apply(this.initialConfig, config));
		
		// call parent
		GH.ui.panels.TestGridPanel.superclass.initComponent.apply(this, arguments);
    },
    
    
    renderDate: function(value, p, r) {
    	return String.format('<b>{0}</b>', value.dateFormat('M j, Y, g:i a'));
    },
    
    renderContent: function(value, p, record) {
    	return String.format('<a style="family:verdana;color:blue;font-size:12px;">{0}</a>', value);
    },
    
    renderName: function(value, p, record) {
    	return String.format('<a style="font-family:Times New Roman;font-size:15px;font-style:italic">{0}</a>', value);
    },
});